<template>
    <div class="flex items-center font-bold" :style="state.headStyle">
        <div :class="state.store.config.plateStyle === 'compact' ? 'w-full text-center truncate' : 'w-full truncate'">
            {{ state.store.menu.collapsed && state.store.config.plateStyle === 'compact' ? '系' : 'XXX管理系统' }}
            <!-- <img src="../../../assets/images/public/logo2.png"> -->
        </div>
    </div>
</template>
<script setup>
let state = reactive({
    headStyle: undefined,
    store: useStore(),
    router: useRouter(),
})

watch(
    () => [state.store.config.plateStyle, state.store.config.menuTheme, state.store.config.primaryColor, state.store.config.isDark],
    (newVal, oldVal) => {
        if (newVal[0] === 'normal') {
            if (newVal[1] === 'normal') {
                state.headStyle = 'color:#fff;padding-left:25px;'
            }
            if (newVal[1] === 'dark') {
                state.headStyle = `color:#fff;padding-left:25px;background:${state.store.config.isDark ? '#1f1f1f' : '#001529'}`
            }
        }
        if (newVal[0] === 'compact') {
            if (state.store.config.isDark) {
                state.headStyle = 'color:#fff;height:56px;background:#1f1f1f;'
            } else {
                if (newVal[1] === 'normal') {
                    state.headStyle = 'color:#fff;height:56px; background:' + state.store.config.primaryColor + ';'
                }
                if (newVal[1] === 'dark') {
                    state.headStyle = `color:#fff;height:56px;background:${state.store.config.isDark ? '#1f1f1f' : '#001529'}`
                }
            }
        }
        if (newVal[0] === 'topMenu') {
            if (state.store.config.isDark) {
                state.headStyle = 'color:#fff;width:200px;padding-left:25px;background:#1f1f1f;'
            } else {
                if (newVal[1] === 'normal') {
                    state.headStyle = 'color:#fff;width:200px;padding-left:25px;background:' + state.store.config.primaryColor
                }
                if (newVal[1] === 'dark') {
                    state.headStyle = `color:#fff;width:200px;padding-left:25px;background:${state.store.config.isDark ? '#1f1f1f' : '#001529'};`
                }
            }
        }
        if (newVal[0] === 'position') {
            if (state.store.config.isDark) {
                state.headStyle = 'color:#fff;width:200px;padding-left:25px;background:#1f1f1f;'
            } else {
                if (newVal[1] === 'normal') {
                    state.headStyle = 'color:#fff;width:200px;padding-left:25px;background:' + state.store.config.primaryColor
                }
                if (newVal[1] === 'dark') {
                    state.headStyle = `color:#fff;width:200px;padding-left:25px;background:${state.store.config.isDark ? '#1f1f1f' : '#001529'}`
                }
            }
        }
    },
    { immediate: true }
)

const {} = toRefs(state)
</script>
<!-- <style scoped>
.bgBlue {
    background: var(--ant-primary-color);
    color: #fff;
}
</style> -->
